<template>
  <section class="user">
    <div class="user-container">
      <ul class="list-nav">
        <li
          v-for="item of tabNavList"
          :key="item.value"
          :class="currentTab === item.value ? 'active' : ''"
          @click="currentTab = item.value"
        >
          {{ item.lable }}
        </li>
      </ul>
      <section
        v-show="['follow','fans'].includes(currentTab)"
        class="follow-container"
      >
        <div
          class="follow-list"
        >
          <user-card v-for="item of followList" :key="item.id" :data="item" />
        </div>
        <div
          v-loading="loading"
          class="more-loading"
        >
          <div
            v-show="btn_moreFans"
            class="more"
            @click="getFansList({ more: true })"
          >
            加载更多
          </div>
        </div>
      </section>
      <section
        v-show="['blog','collect','like'].includes(currentTab)"
        class="blog-container"
      >
        <ul
          class="blog-list"
        >
          <blog-item
            v-for="item of blogList"
            :key="item.id"
            :data="item"
            @modifyArticleStatus="modifyArticleStatus"
          />
        </ul>
        <div
          v-loading="loading"
          class="more-loading"
        >
          <div
            v-show="btn_moreArticle"
            class="more"
            @click="getArticleList({ more: true })"
          >
            加载更多
          </div>
        </div>
      </section>
    </div>
    <div class="author-container">
      <user-panel :target-user-id="targetUserId" :page="'user'" />
    </div>
  </section>
</template>

<script>
// import component
import UserPanel from '~/components/public/UserPanel'
import BlogItem from '~/components/article/BlogItem'
import UserCard from '~/components/user/UserCard'

export default {
  head() {
    return {
      title: `${this.$route.query.name} 的个人中心` || '个人中心'
    }
  },
  components: {
    UserPanel,
    BlogItem,
    UserCard
  },
  data() {
    return {
      btn_moreFans: true,
      btn_moreArticle: true,
      loading: false,
      targetUserId: this.$route.params.id,
      currentTab: 'blog',
      tabNavList: [{
        lable: '博客',
        value: 'blog'
      }, {
        lable: '收藏',
        value: 'collect'
      }, {
        lable: '喜欢',
        value: 'like'
      }, {
        lable: '关注',
        value: 'follow'
      }, {
        lable: '粉丝',
        value: 'fans'
      }],
      blogList: [],
      followList: [],
      pagination: 1
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  watch: {
    currentTab: function (newVal) {
      switch (newVal) {
        case 'blog':
          this.pagination = 1
          this.blogList = []
          this.getArticleList({ classify: 'release' })
          break
        case 'collect':
          this.pagination = 1
          this.blogList = []
          this.getArticleList({ classify: 'hasCollect' })
          break
        case 'like':
          this.pagination = 1
          this.blogList = []
          this.getArticleList({ classify: 'hasSupport' })
          break
        case 'follow':
          this.pagination = 1
          this.followList = []
          this.getFansList({ classify: 'follow' })
          break
        case 'fans':
          this.pagination = 1
          this.followList = []
          this.getFansList({ classify: 'fans' })
          break
      }
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    async getArticleList({
      classify = 'release',
      offset = this.pagination,
      limit = 20,
      more = false
    } = {}) {
      this.loading = true
      this.btn_moreArticle = false
      const data = await this.$request({
        context: this,
        method: 'get',
        url: `article/getByUserId/${classify}/${offset}/${limit}`,
        params: {
          userId: this.targetUserId
        }
      })
      this.loading = false
      if (!data) return
      if (data.length === 0) {
        this.$message.success('没有更多啦')
        if (!more) {
          this.blogList = []
        }
        return
      }
      if (data.length === limit) {
        this.btn_moreArticle = true
      }
      this.pagination++
      if (more) {
        this.blogList = [...this.blogList, ...data]
      } else {
        this.blogList = data
      }
    },
    async getFansList({
      classify = 'fans',
      offset = this.pagination,
      limit = 20,
      more = false
    } = {}) {
      try {
        this.loading = true
        this.btn_moreFans = false
        const { status, msg, data } = await this.$axios.$post(`/api/userFans/${classify}ById`, {
          pageNum: offset,
          pageSize: limit,
          targetUserId: this.targetUserId,
          userId: this.userData ? this.userData.userId : ''
        })
        this.loading = false
        if (status === 200) {
          if (data.length === 0) {
            this.$message.success('没有更多啦')
            if (!more) {
              this.followList = []
            }
            return
          }
          if (data.length === limit) {
            this.btn_moreFans = true
          }
          this.pagination++
          if (more) {
            this.followList = [...this.followList, ...data]
          } else {
            this.followList = data
          }
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async modifyArticleStatus(articleId, modifyType) {
      try {
        const { status, msg } = await this.$axios.$post(`/api/article/status/${modifyType}`, {
          articleId
        }, {
          headers: {
            YDSY_HEADER_TOKEN: this.userData && this.userData.userToken
          }
        })
        if (status === 200) {
          this.pagination = 1
          this.getArticleList()
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/user/user";

.follow-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>
